//echart_1 人口性别比例
function echart_1() {
    var dom = document.getElementById("chart_1");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '人口性别比例';
   
 option = {
    backgroundColor: '',
    
    grid:{
                    left:'20',
                    right:'10',
                    bottom:'50',
                                  
                },

    tooltip: {
        show: false,
        formatter: "{b} <br> {c}%"

    },
    legend: {
        icon: "circle",
        bottom: '43%',
        left: '0%',
        itemWidth: 7,
        itemHeight: 7,
        itemGap: 40,
        textStyle: {
            color: '#89A7AF',
        },
        data: [{
                name: ''
            },
            {
                name: ''
            },
            // {
            //     name: '其他'
            // }
        ]
    },
    xAxis: [{
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false,
        }
    }],
    yAxis: [{
        //type: 'category',
        data: [''],
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
            }
        }

    }],
    series: [{
            name: '油车',
            type: 'bar',
            barWidth: 30,
            stack: '危货种类占比',
            label: {
                normal: {
                    borderWidth: 10,
                    distance: 20,
                    align: 'center',
                    verticalAlign: 'middle',
                    borderRadius: 1,
                    borderColor: '#0667a9',
                    backgroundColor: '#0667a9',
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    color: '#fff'
                }
            },
            itemStyle: {
                color: '#0667a9'
            },
            data: [{
                value: 53.1,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#0667a9' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#0667a9' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false

                        }
                    }
                }
            }]
        },
        {
            name: '油车三角形',
            type: 'line',
            barWidth: 0,
            markPoint: {
                symbol: 'triangle',
                symbolRotate: '180',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#fff' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                },
                symbolSize: [6, 5], // 容器大小
                symbolOffset: [0, -15], //位置偏移
                data: [{
                    coord: [53.11 / 2]
                }],
                label: {
                    normal: {
                        show: false
                    },
                    offset: [0, 0],
                }
            }
        },
        {
            name: '危化品',
            type: 'bar',
            barWidth: 16,
            stack: '危货种类占比',
            itemStyle: {
                color: '#E67C26'
            },
            label: {
                normal: {
                    borderWidth: 10,
                    distance: 20,
                    align: 'center',
                    verticalAlign: 'middle',
                    borderRadius: 1,
                    borderColor: '#d1a201',
                    backgroundColor: '#d1a201',
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    color: '#fff'
                }
            },
            data: [{
                value: 23,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#d1a201' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#d1a201' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false

                        }
                    }
                }
            }]
        },
        {
            name: '危化品三角形',
            type: 'line',
            barWidth: 0,
            markPoint: {
                symbol: 'triangle',
                symbolRotate: '180',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#fff' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                },
                symbolSize: [6, 5], // 容器大小
                symbolOffset: [0, -15], //位置偏移
                data: [{
                    coord: [53.11 + 23 / 2]
                }],
                label: {
                    normal: {
                        show: false
                    },
                    offset: [0, 0],
                }
            }
        }
    ]
};


    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

echart_1();



function echart_2() {
    var dom = document.getElementById("chart_2");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    var ydata = [{
        name: '0-17岁   20%',
        value: 18
    },
    {
        name: '18-40岁  32%',
        value: 16
    },
    {
        name: '41-65岁  25%',
        value: 15
    },
    {
        name: '66岁以上  23%',
        value: 14
    },
    
];
var color = ["#1fd094", "#0090ff","#1e8d8e","#ecd174"]
var xdata = ['0-17岁   20%', "18-40岁  32%", "41-65岁  25%", "66岁以上  23%"];


option = {
    color:color,
    legend: {
        orient: "circle",
        x: "left",
        top: "center",
        left: "60%",
        bottom: "0%",
        data: xdata,
        itemWidth: 8,
        itemHeight: 8,
        itemGap :16,
        color:"#fff",
        textStyle:{
            color:"#fff",
        },
        formatter :function(name){
            return ''+name
          }
    },
    series: [{
        type: 'pie',
        clockwise: false, //饼图的扇区是否是顺时针排布
        minAngle: 2, //最小的扇区角度（0 ~ 360）
        radius: ["60%", "70%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
         itemStyle: { //图形样式
            normal: {
                borderColor: '#09111f',
                borderWidth: 6,
            },
        },
        label: {
            normal: {
                show: false,
                position: 'center',
                formatter: '{text|{b}}\n{c} ({d}%)',
                rich: {
                    text: {
                        color: "#666",
                        fontSize: 14,
                        align: 'center',
                        verticalAlign: 'middle',
                        padding: 8
                    },
                    value: {
                        color: "#8693F3",
                        fontSize: 24,
                        align: 'center',
                        verticalAlign: 'middle',
                    },
                }
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: 24,
                }
            }
        },
        data: ydata
    },{
        type: 'pie',
        radius: ["50%", "55%"],
        center: ["30%", "50%"],
        hoverAnimation: false,
        labelLine: {
            normal: {
                show: false,
                length: 30,
                length2: 55
            },
            emphasis: {
                show: false
            }
        },
        name: "",
        data: [{
            name: '',
            value: 0,
            itemStyle: {
                normal: {
                    color: "#111e38"
                }
            }
        }]
    },]
};
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

echart_2();

function echart_3() {
    var dom = document.getElementById("chart_3");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var data_val=[2220, 1682, 2791, 3000, 4090],
    xAxis_val=[ '2016年', '2017年', '2018年', '2019年', '2020年'];
var data_val1=[0,0,0,0,0];
var option = {
    grid:{
        left:10,
        top:'10%',
        bottom:0,
        right:40,
        containLabel:true
    },
    tooltip:{
        show:true,
        backgroundColor:'#384157',
        borderColor:'#384157',
        borderWidth:1,
        formatter:'{b}:{c}万',
        extraCssText:'box-shadow: 0 0 5px rgba(0, 0, 0, 1)'
    },
    xAxis: {
        data: xAxis_val,
        boundaryGap:false,
        axisLine:{
            show:false
        },
         axisLabel: {
            textStyle: {
                color: '#5c6076'
            }  
        },
        axisTick:{
            show:false
        }
    },
    yAxis: { 
        ayisLine:{
            show:false
        },
         axisLabel: {
            textStyle: {
                color: '#5c6076'
            }  
        },
        splitLine:{
            show:true,
            lineStyle:{
                color:'#2e3547'
            }
        },
        axisLine: {
                lineStyle: {
                    color: '#384157'
                }
            }
    },
    
    series: [
        {
            type: 'bar',
            name:'linedemo',
            
            
            tooltip:{
                show:false
            },
            animation:false,
            barWidth:1.4,
            hoverAnimation:false,
            data:data_val,
            itemStyle:{
                normal:{
                    color:'#43a5dd',
                    opacity:0.6,
                    label:{
                        show:false
                    }
                }
            }
        },
        {
            type: 'line',
            name:'距离',
            
            animation:false,
            symbol:'circle',
    
            hoverAnimation:false,
            data:data_val1,
            itemStyle:{
                normal:{
                    color:'#f17a52',
                    opacity:0,
                }
            },
            lineStyle:{
                normal:{
                    width:1,
                    color:'#384157',
                    opacity:1
                }
            }
        },
        {
            type: 'line',
            name:'linedemo',
            smooth:true,
            symbolSize:10,
            animation:false,
            lineWidth:1.2,
            hoverAnimation:false,
            data:data_val,
            symbol:'circle',
            itemStyle:{
                normal:{
                    color:'#43a5dd',
                    shadowBlur: 40,
                    label:{
                        show:true,
                        position:'top',
                        textStyle:{
                            color:'#43a5dd',
                    
                        }
                    }
                }
            },
           areaStyle:{
                normal:{
                    color:'#43a5dd',
                    opacity:0.08
                }
            }
            
        }
    ]
};
myChart.setOption(option);



    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}
echart_3();
